// pseudo elements
@mixin pe {
    position: absolute;
    display: block;
    content: '';
}

// happy lion base style
.happy-lion {
    position: relative;
    width: 5em;
    height: 5em;
    &::before,
    &::after {
        z-index: 5;
        top: 0;
        left: 0;
        width: 5em;
        height: 5em;
        border-radius: 11.5%;
        background: #f6b300;

        @include pe;
    }
    &::after {
        transform: rotate(45deg);
    }
}

.lion-face {
    position: absolute;
    z-index: 10;
    top: 2.96em;
    left: .79em;
    width: 3.42em;
    height: 1.52em;
    border-radius: .76em;
    background: #fff;
    &::before,
    &::after {
        top: -1.14em;
        width: .49em;
        height: .49em;
        border-radius: 50%;
        background: #000;

        @include pe;
    }
    &::before {
        left: .44em;
    }
    &::after {
        right: .44em;
    }
}

.lion-nose {
    position: absolute;
    z-index: 15;
    top: -.86em;
    left: .73em;
    width: 1.96em;
    height: 1.96em;
    border-radius: 50%;
    background: #fff;
    &::before {
        z-index: 25;
        top: .85em;
        left: .25em;
        width: 1.46em;
        height: .25em;
        border-radius: .125em;
        background: #000;
        box-shadow: 0 -.3em 0 .16em #fff;

        @include pe;
    }
    &::after {
        z-index: 20;
        top: .49em;
        left: .47em;
        width: 1.02em;
        height: 1em;
        transform: rotate(-37.5deg) skewX(16deg);
        border-radius: 20% 28% / 20% 28%;
        background: #000;

        @include pe;
    }
}
